<template>
  <div class="subPage">
    <div class="chatTop" @click="replyTextShow = false">
      <div class="top clearfix">
        <div v-if="isHistory||talkInfo.status === '34'">
          <span class="fr topInit">问诊已结束</span>
        </div>
        <div class="topInit clearfix" v-else>
          <div v-if="talkInfo.category === '3' || talkInfo.category === '4'|| talkInfo.category === '5'">
            <count-down v-if="time" :time='time' @chatEnd='chatAllowEnd'></count-down>
          </div>
          <div v-else>
            <span class="fl">问诊中</span>
          </div>
        </div>
      </div>
      <div style="flex:1;overflow:hidden">
        <scroll-view
        :scroll-y='true'
        :scroll-top='scrollTop'
        style="height:99.5%;box-sizing:border-box;"
        :scroll-anchoring="true"
        :refresher-triggered="triggered"
        :refresher-enabled="enabled"
        @refresherrestore="go"
        @refresherrefresh="getMsgHistory(true,true)"
        @click="replyTextShow = false"
        @scroll="bindScrollTop($event)"
        :scroll-with-animation='true'>
          <div class="initTop" style="displsy:inline-block">
            <!-- <p>1.问诊期间,患者提问次数最多为10次 去设置 </p>
            <p>2.医生回复次数不限,给具诊断或治疗意见后即可结束问诊</p>
            <p>3.点击患者头像,可查看患者相关病情信息</p> -->
            <div class="paddingBox" >
              <div class="fl topDocHeadImg">
                <img :src="baseInfo.doctor_image_url" alt="">
              </div>
              <div class="fl docDesc" >
                <p class="title">{{baseInfo.doctor_name?baseInfo.doctor_name:''}}医生</p>
                <p>1.问诊期间,您可提问最多{{baseInfo.max_ask_times}}次！</p>
                <p>2.医生给具诊断或治疗意见后问诊结束</p>
                <p>3.点击个人头像,可查看本次相关病情信息</p>
              </div>
            </div>
          </div>
          <ul :class="['chatList',{'addHeight':ifIphonex}]"  @click="replyTextShow = false">
            <li v-for="(item, index) in chatList" :key="index" :class="{clearfix: true, doctorBg: item.sender == '2', paddingBtm0: item.image_urls&&item.image_urls.length>0}" >
              <div class="patientDiv clearfix" v-if="item.sender == '1'">
                <div class="infoDiv">
                  <div class="clearfix">
                    <span class="fl">第{{item.count}}次留言</span>
                    <span class="fr">{{baseInfo.patient_name}}患者</span>
                  </div>
                  <div> {{item.sendTime}}</div>
                </div>
                <img class="headImg" :src="baseInfo.patient_image_url" @click="showLeft=true" />
              </div>
              <div class="patientDiv doctorDiv clearfix " v-if="item.sender == '2'">
                <img class="headImg" :src="baseInfo.doctor_image_url" />
                <div class="infoDiv">
                  <div class="clearfix">
                    <span class="fr" ></span>
                    <span class="fl">{{baseInfo.doctor_name}}医生</span>
                  </div>
                  <div class="sendTime">{{item.sendTime}}</div>
                </div>
              </div>
  <!--            图文-->
              <div v-if="!item.sound_keys">
                <text class="textCon" v-if="item.content&&item.content.trim()!==''" >
                  {{item.content?item.content:""}}
                </text>
                <ul v-if="item.imageList && item.imageList.length>0" class="imgList">
                  <div v-for ='(subItem, subIndex) in item.imageList' :key="subIndex">
                    <span v-if="!subItem.imgShow" class="loadingSpan" >
                      <img src="../../../../../static/images/loadingImg.png" alt="">
                    </span>
                    <img v-if="subItem.imgShow" :src="subItem.url" @click.stop="lookImg(item.image_urls, subIndex)" />
                    <img :src="subItem.url" @click.stop="lookImg(item.image_urls, subIndex)" @error="imgFaildLoad($event, index, subIndex, subItem)"  @load="imgLoadFun($event, index, subIndex, subItem)" style="width: 0px!important;height: 0px!important"/>
                    <!-- <img v-if="imgLoadListstack[index]" :src="subItem.url" @click.stop="lookImg(item.image_urls, subIndex)" @error="imgFaildLoad($event, index, subIndex, subItem)"  @load="imgLoadFun($event, index, subIndex, subItem)" style="width: 0px!important;height: 0px!important"/> -->
                  </div>
                </ul>
                <div class="goPayBox" v-if="item.operation==1">
                  <span class="payBtn" @click="goOfflineOrder" >去支付</span>
                </div>
              </div>
  <!--            语音-->
              <div v-if="item.sound_keys" class="audioDiv">
                <img v-if="imgUrl && !item.isPlay" :src="imgUrl + 'chatPlayImg.png'" class="palyImg" @click.stop="playMp3(item, index)"/>
                <img v-if="imgUrl && item.isPlay" :src="imgUrl + 'chatStopImg.png'" class="palyImg" @click.stop="stopMp3(item, index)"/>
                <div id="progress">
                  <div id="progress-line" :class="item.className">
                    <div class="progress-bg"></div>
                    <div class="progress-red"></div>
                    <div class="progress-dot">
                      <div class="iconyuandian1" :style="{left: item.leftDin + 'px!important'}"></div>
                    </div>
                  </div>
                </div>
                <div class="time">{{item.sound_keys.soundTime}}</div>
                <span v-if="item.read_state==='0'&&item.sender!=='1'" class="unReadPoint" ></span>
              </div>
            </li>
            <!-- <li v-if="chatList.length===0 && isIphone" class="clearfix" style="display:block;height:400px;opacity:0;" ></li> -->
            <div class="timeTips" v-if="baseInfo.max_ask_times&&!isHistory" >本次问诊可提问{{baseInfo.max_ask_times}}次，剩余{{baseInfo.max_ask_times - baseInfo.ask_times}}次</div>
          </ul>
        </scroll-view>
      </div>
    </div>
    <div :class="{chatBtm: true, clearfix: true, isIphoneX: ifIphonex}" v-if="!replyTextShow && !replyAudioShow">
      <div v-if="baseInfo.ask_times>=baseInfo.max_ask_times||isHistory||talkInfo.status === '34'" :class="['bandDiv',{'redColor':isHistory||talkInfo.status === '34'}]" >{{isHistory||talkInfo.status === '34'?'问诊已经结束!':'本次留言次数已用完，请通过其它方式联系医生！'}}</div>
      <div v-else class="sendDiv" @click="clickReply">{{baseInfo.ask_times===0?'留言':'继续留言'}}</div>
      <!-- <div class="sendDiv">发送</div> -->
    </div>
<!--    文字 图片发送框-->
    <div v-if="replyTextShow && !replyAudioShow" class="replyDiv">
      <div class="replyTop">
        <textarea class="inputStyle" v-model.trim="iptValue" placeholder-style="color:#CCC" maxlength="200" @input="addWords" :placeholder="placeholderText"></textarea>
        <div class="limit">{{iptValue.length}}/200字</div>
      </div>
      <div class="uploadImgDiv">
        <div class="uploadImg" v-for="(item, index) in files" :key="index">
          <img :src="item" class="upload" @click="previewImage($event, index)" v-if="index < 8"/>
          <img :src="imgUrl + 'deleteUploadImg.png'" class="deleteImg" @click="deleteIndexImg(index)" v-if="index < 8"/>
        </div>
        <img :src="imgUrl + 'addUploadImg.png'" v-if="files.length < 8" @click="chooseImage" class="upload addImg"/>
      </div>
      <div  :class="{chatBtm: true, clearfix: true, isIphoneX: ifIphonex}">
        <ul class="btnFl fl" v-if="hadAudio" >
          <li v-for="(item, index) in chatDoList" :key="index" class="clearfix" @click="clickDoBtn(item, index)">
            <img v-if="imgUrl" :src="item.imgSrc"/>
            <span>{{item.name}}</span>
          </li>
        </ul>
        <!-- <div class="btnFr fr" @click="clickReply">
          立即回复
        </div> -->
        <div :class="['btnFr','fr',{'fullWidth':!hadAudio}]"  @click="sendMsg(false)" >发送</div>
      </div>
    </div>
<!--    语音-->
    <div v-show="replyAudioShow" class="replyAudioDiv" >
      <div class="closeDiv">
        <span class="closeSpan" @click="closeAudio">
          <img v-if="imgUrl" :src="imgUrl+'closeAudioImg.png'" style="height:27rpx;width:27rpx;" />
        </span>
      </div>
      <div class="timeDiv">
        {{dealTime}}
      </div>
      <div class="clickDiv">
        <span v-if="audioStatus != 1" class="reset" @click="resetAudio">重录</span>
        <span v-if="audioStatus == 1" class="clickAudio" @click="startRecored">点击录音</span>
        <span v-if="audioStatus == 2" class="clickAudio" @click="resumeRecored">继续录音</span>
        <span v-if="audioStatus == 3" class="clickAudio stop" @click="pauseRecored">暂停</span>
        <span v-if="audioStatus != 1" class="done" @click="showModal">完成</span>
      </div>
      <div class="tipsDiv">
        <p>1.录制期间，请不要离开当前页面，以免造成语言丢失</p>
        <p>2.录制结束后，请点击完成，保存录音</p>
      </div>
    </div>
<!--    确认是否完成录音-->
    <div v-if="modelStatus" class="bg">
      <div class="sure">
        <div class="title">确认完成录音？</div>
        <div class="btm">
          <div @click="modelStatus = false" class="cancel">取消</div>
          <div @click="sureFinish">确认</div>
        </div>
      </div>
    </div>
    <!-- 录音权限 -->
    <div class="modal" v-if="showAuditModal">
      <div class="out">
        <div class="msgTop">
          <p>授权录音功能</p>
          <p>请同意此应用访问您的录音功能，在设置中打开</p>
        </div>
        <div class="msgBtm" >
          <span @click="showAuditModal = false">取消</span>
          <span @click="goSetting">去设置</span>
        </div>
      </div>
    </div>
<!--    <audio :src="mp3Src" id="myAudio" style='display: none'></audio>-->
    <!--    频次搜索-->

<!--  侧边弹出层  -->
      <i-drawer mode="left" :visible="showLeft" @close="toggleLeft" v-if="showLeft">
        <div class="demo-container">
          <side-details></side-details>
        </div>
      </i-drawer>
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>

<script>
  let app = getApp()
  let store = app.store
  import {mapState} from "vuex";
  const { $Toast, $Message } = require("../../../../../static/iview/base/index");
  import api from "@/api/api";
  import storage from "@/utils/storage";
  import { throttle, debounce } from "@/utils/index";
  import countDown from '@/components/countDown'
  import sideDetails from '@/components/sideDetails'
  import Bus from '@/utils/bus.js'
  export default {
    components: {
      countDown,sideDetails
    },
    computed: {
      ...mapState([
        'phoneCamera', 'ifIphonex','talkInfo'
      ]),
      dealTime () {
        let front =  Math.trunc(this.recorderTime / 60) > 9 ? Math.trunc(this.recorderTime / 60) : '0' + Math.trunc(this.recorderTime / 60)
        let back = this.recorderTime - front * 60
        back = back > 9 ? back : '0' + back
        return `${front}:${back}`
      },
    },
    data() {
      return {
        recorderTime: 0,
        recorderTimer: null, // 语音定时器
        audioStatus: 1, // 1 未开始-点击录音 2 录音中-暂停 3 暂停录音-继续录音
        replyAudioShow: false,
        modelStatus: false,
        iptValue: '',
        uploadImg: [],
        files: [], // 本地缓存中的图片数组
        scrollId: '',
        mp3Src: '',
        replyTextShow: false,
        scrollTop: 0,
        imgUrl: 'https://ks3-cn-beijing.ksyun.com/wxapp/wdrm/image/',
        chatDoList: [],
        chatList: [],
        baseInfo: {}, // 留言基本信息
        innerAudioContext: null,
        iconLeft: 0,
        times: 0, // 走动次数
        timer: null,
        recorderManager: null,
        showLeft: false,
        hadAudio: true, //默认音频
        apt_id: '',
        upLoadLodin: false,
        newScrollTop: 0,
        placeholderText: '还可继续提问10次',
        nowMp3Info: {},
        respMp3Info: {}, // 音频上传成功后返回的信息
        circleQuery: null,
        triggered:false,
        enabled: true,
        isHistory: false,
        time: '',
        chatEnd: false,
        showAuditModal: false,
        havGif: false,  // 上传图片是否含有gif
        imgLoadListstack: [], // 图片加载栈 （没上线）
        oldImgIndex: 0, // 图片加载栈生成过程运用index （没上线）
        audioPlayInfo: {
          item:{},
          index: 0
        } // 正在 播放的录音信息
      };
    },
    onLoad(options) {
      Object.assign(this.$data, this.$options.data()) // 初始化data 中的数据
      console.log(this.talkInfo,'聊天信息')
      this.replyAudioShow = false
      this.isHistory = false
      this.hadAudio = false
      this.triggered = false
      clearInterval(this.timer)
      this.resetAudio()
      this.timer = null
      this.times = 0
      this.uploadImg = []
      this.files = []
      if (options.hadAudio) {
        this.hadAudio = true
        console.log(options)
        if(options.category && options.category == '5') {
          this.hadAudio = false
          wx.setNavigationBarTitle({
            title: '留言'
          })
        } else {
          wx.setNavigationBarTitle({
            title: '音频问诊'
          })
        }
      }
      console.log(options)
      if (options.isHistory) {
        this.isHistory = true
      }
      this.apt_id = options.apt_id
      this.innerAudioContext = wx.createInnerAudioContext() // 获取微信录音组件
      wx.setInnerAudioOption({
        obeyMuteSwitch: false
      });
      this.chatDoList = [
        {
          name: '录制语音',
          imgSrc: this.imgUrl + 'chatImg01.png'
        }
        // {
        //   name: '常用语',
        //   imgSrc: this.imgUrl + 'chatImg03.png'
        // },
        // {
        //   name: '线下挂号',
        //   imgSrc: this.imgUrl + 'chatImg04.png'
        // }
      ]
      setTimeout(() => {
        if (this.baseInfo.ask_times>=this.baseInfo.max_ask_times) {
          this.replyTextShow = false
        }
        if (this.baseInfo.ask_times<=this.baseInfo.max_ask_times && !this.isHistory) {
          this.replyTextShow = !this.isHistory
        }
      }, 200);
      // 定时刷新
      if (this.circleQuery === null && !this.isHistory) {
        this.circleQuery = setInterval(() => {
          this.getMsgHistory(false)
          console.log(this.circleQuery)
        }, 30000);
      }
      this.getMsgHistory(true)
    },
    onShow () {
      this.modelStatus = false
      let that = this
      that.recorderManager = mpvue.getRecorderManager()
    },
    onUnload () {
      this.resetAudio()
      this.replyTextShow = false
      this.replyAudioShow = false
      this.replyAudioShow = false
      this.hadAudio = false
      this.triggered = false
      this.showLeft = false
      this.chatList = []
      this.baseInfo = {}
      clearInterval(this.circleQuery)
      this.circleQuery = null
      this.scrollTop = 0
      this.isHistory = false
      this.innerAudioContext.pause()
      clearInterval(this.timer)
      this.times++
    },
    methods: {
      // 图片加载完成
      imgLoadFun (e, index, subIndex, subItem) {
        setTimeout(() => {
          this.$set(this.chatList[index].imageList[subIndex], 'imgShow', true)
          this.chatList = JSON.parse(JSON.stringify(this.chatList))
          // 图片分时加载  最近一次先加载   （没上线）
          // if(subIndex === this.chatList[index].imageList.length-1) {
          //   let i = index
          //   while(i >= 0) {
          //     if(this.imgLoadListstack[i]===false) {
          //       this.$set(this.imgLoadListstack,i,true)
          //       return
          //     }
          //     i--
          //   }
          // }
        }, 300);
      },
      // 图片加载失败 （没上线）
      imgFaildLoad(e, index, subIndex, subItem) {
        // 图片分时加载  最近一次先加载
        // if(subIndex === this.chatList[index].imageList.length-1) {
        //   let i = index
        //   while(i >= 0) {
        //     if(this.imgLoadListstack[i]===false) {
        //       this.$set(this.imgLoadListstack,i,true)
        //       return
        //     }
        //     i--
        //   }
        // }
      },
      refresherrefresh () {
        this.triggered = true
      },
       chatAllowEnd (value) {
        this.chatEnd = value
      },
      go () {
        setTimeout(() => {
            this.scrollTop =  this.scrollTop + 999998
            // console.log('执行')
          }, 500)
      },
      // 跳转支付线下号源页面
      goOfflineOrder () {
        this.$router.push("/pages/center/child/appointmentRecord/main?isOffline=true")
      },
      // 获取历史留言信息
      getMsgHistory (jud,showToast) {
        if(this.triggered) return
        let oldList = JSON.parse(JSON.stringify(this.chatList))
        let getStatus = {'showLoading':jud}
        this.triggered = true // 刷新状态
        this.$api.getLeaveMsg({apt_id:this.apt_id},(getStatus)).then(res=>{
          this.chatList = res.data.messages
          // 图片分时加载 （没上线）
          // let imgLoadList = []  // 保存图片加载状态
          res.data.messages.forEach((e,i)=>{
            // 图片加载
            this.chatList[i].imageList = []
            if (e.thumbnail_urls&&e.thumbnail_urls.length>0) {
              if (oldList.length>i) {
                for (let j = 0; j < e.thumbnail_urls.length; j++) {
                  this.chatList[i].imageList.push({url: this.chatList[i].thumbnail_urls[j],imgShow: oldList[i].imageList[j].imgShow?true:false})
                }
              } else {
                for (let j = 0; j < e.thumbnail_urls.length; j++) {
                  this.chatList[i].imageList.push({url: this.chatList[i].thumbnail_urls[j],imgShow: false})
                }
              }
              // 图片分时加载 （没上线）
              // imgLoadList[this.oldImgIndex] = false  // 设置图片加载状态
              // this.oldImgIndex = i  // 保存含有图片信息的index
            }
            this.$set(this.chatList[i], 'sendTime', this.filterTime(e.send_time))
            if (this.chatList[i].sound_keys) {
              this.$set(this.chatList[i], 'leftDin', 0)
              this.$set(this.chatList[i], 'isPlay', false)
              this.$set(this.chatList[i], 'isStop', false)
              this.chatList[i].className = '.progress' + i
              this.chatList[i].sound_keys.soundTime = this.chatList[i].sound_keys ? this.timeDeal(Math.trunc(this.chatList[i].sound_keys.time)) : 0
            }
            // 文字回车换行处理
            if (this.chatList[i].content) {
              this.chatList[i].content = this.chatList[i].content.split(/\\n/).join(' \n')
            }
          })
          this.baseInfo = res.data.base_info
          this.time = this.baseInfo.diagnose_time
          if (this.baseInfo.is_over=='1') {
            this.isHistory = true
            this.replyTextShow = false
          }
          if (this.baseInfo.ask_times>=this.baseInfo.max_ask_times) {
            this.replyTextShow = false
          }
          this.placeholderText = '还可继续提问' + (this.baseInfo.max_ask_times - this.baseInfo.ask_times<=0?0:this.baseInfo.max_ask_times - this.baseInfo.ask_times) + '次'
          this.triggered = false
          if(showToast) {
            $Toast({content:'刷新成功'})
          }
          // 图片分时加载 （没上线）
          // if(this.imgLoadListstack.length===0) {  // 图片加载状态
          //   this.imgLoadListstack = imgLoadList
          // }
          // // 将最近一次的图片允许加载
          // this.$set(this.imgLoadListstack,this.oldImgIndex,true)
        })
      },
       // 时间转化
      timeDeal (val) {
        let front =  Math.trunc(val / 60) > 9 ? Math.trunc(val / 60) : '0' + Math.trunc(val / 60)
        let back = val - front * 60
        back = back > 9 ? back : '0' + back
        return `${front}:${back}`
      },
      // 发送信息
      sendMsg (isAudio) {
        if (this.upLoadLodin) { // 图片上传状态
          $Message({
            content: "上传中，请稍后再试",
            type: "warning"
          });
          return
        }
        let params = {}
        if (isAudio) {
          params = {
            apt_id: this.apt_id,
            sound_keys: {
              time: this.recorderTime,
              key: this.respMp3Info.file_key
            }
          }
        } else {
          if (this.iptValue.trim().length===0 && this.uploadImg.length===0) {
            // $Toast({
            //   content: "请填写留言或者图片再发送"
            // });
            wx.showToast({
              title: '请填写留言或者图片再发送',
              icon: 'none',
              duration: 2000
            })
            return
          }
          let list = []
          this.uploadImg.forEach(ele=>{
            list.push(ele)
          })
          params = {
            apt_id: this.apt_id,
            content: this.iptValue?this.iptValue:'',
            image_keys: list
          }
        }
        console.log(params)
        this.$api.sendMessage(params, {showLoading:true})
        .then(res=>{
          console.log(res.data)
          if (res.code===0) {
            $Toast({
              content: "发送成功",
              type: "success"
            });
            this.files = []
            this.uploadImg = []
            this.iptValue = ''
            this.replyTextShow = false
            this.replyAudioShow = false
            this.getMsgHistory(true)
            this.nowMp3Info = {}
            this.respMp3Info = {}
            this.resetAudio()
            setTimeout(() => {
              this.scrollTop = this.scrollTop + 999999
            }, 1000)
          }
        })
        .catch(err=>{
          console.log(err)
          this.files = []
            this.uploadImg = []
            this.iptValue = ''
            this.replyTextShow = false
            this.replyAudioShow = false
            this.getMsgHistory(true)
            this.nowMp3Info = {}
            this.respMp3Info = {}
            this.resetAudio()
            setTimeout(() => {
              this.scrollTop = this.scrollTop + 999999
            }, 500)
        })
      },
      // 确认完成录音
      sureFinish () {
        let that = this
        this.modelStatus = false
        this.recorderManager.onStop((res) => {
          console.log(res,'录音停止')
          this.nowMp3Info = res
          //上传音频文件
          wx.showLoading({
            title: "上传中...",
            mask: true
          });
          // console.log('执行了')
          wx.uploadFile({
            url: api.host + "/api/system/upload_mp3",
            filePath: that.nowMp3Info.tempFilePath,
            name: "MP3",
            header: {
              "content-type": "multipart/form-data",
              "hisee-token": hiseeToken,
              Authorization: "Bearer " + hiseeToken,
            },
            success: function (res) {
              console.log(res)
              if (res.statusCode == 200) {
                that.respMp3Info = JSON.parse(res.data).data
                console.log(that.respMp3Info)
                that.sendMsg(true);
              } else {
                wx.hideLoading();
                wx.showModal({
                  title: "错误提示",
                  content: "上传失败",
                  showCancel: false,
                  success: function (res) {
                  that.nowMp3Info = {}
                  that.resetAudio()
                  },
                });
              }
            },
            fail: function (res) {
              // console.log(res);
              wx.hideLoading();
              wx.showModal({
                title: "错误提示",
                content: "上传音频失败",
                showCancel: false,
                success: function (res) {
                  that.nowMp3Info = {}
                  that.resetAudio()
                },
              });
            },
            complete: function (res) {
            }
          });
        })
        let hiseeToken = storage.getToken();

        setTimeout(() => {
          // 由于小程序启动录音需要一定的准备时间，也就是小程序录音是由延迟的。(1-2秒)
          // 而如果录音时间很短，小于这个延迟时间，就松开了录音按钮，那么执行【recorderManager.stop();】这行代码的时候录音还没有启动。
          // 而执行完【recorderManager.stop();】后，录音启动了。
          // 就这样，这次录音就关闭不了了
          // 解决：结束时增加个延迟 再次结束
          that.recorderManager.stop()
        }, 1000)
      },
      // 点击完成
      showModal () {
        if (Math.trunc(this.recorderTime) <= 1) {
          $Toast({ content: '录音太短,请重新录音再发送' })
          this.resetAudio()
          return
        }
        this.pauseRecored() // 暂停录音
        this.modelStatus = true
      },
      // 重置录音
      resetAudio () {
        clearInterval(this.recorderTimer)
        this.recorderTimer = null
        if(this.recorderManager) {
          this.recorderManager.stop()
        }
        this.recorderManager = null
        this.audioStatus = 1
        this.recorderTime = 0
      },
      // 去设置
      goSetting () {
        this.showAuditModal = false
        mpvue.openSetting({
          success: function (res) {
            console.log(res)

          }
        })
      },
      // 开始录音
      startRecored () {
        let that = this
        // 停止正在播放的音频
        that.stopNowPlayAudio()

        that.recorderManager = null
        that.recorderManager = mpvue.getRecorderManager()
        wx.authorize({
        scope: 'scope.record',
        success() {
            // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
            let options = {
              duration: 63000,
              numberOfChannels: 1,
              format: 'mp3',
              audioSource: 'auto'
            }
            that.audioStatus = 3
            that.recorderManager.start(options)
            that.recorderTimer = setInterval(() => {
                if (that.recorderTime > 59) {
                  // 结束录音
                  that.audioStatus = 2
                  clearInterval(that.recorderTimer)
                  that.pauseRecored()
                  $Toast({
                    content: '录音最长为60秒,请先发送',
                  })
                  return
                }
                that.recorderTime++
              }, 1000)
            // 监听录音开始
            that.recorderManager.onStart((res) => {
            })
            // 监听结束录音结束
            that.recorderManager.onStop((res) => {
              if (that.recorderTime == 59) {
                  // 结束录音
                  that.audioStatus = 2
                  clearInterval(that.recorderTimer)
                  that.pauseRecored()
                  $Toast({
                    content: '录音最长为60秒,请先发送',
                  })
                  return
                }
              that.nowMp3Info = res
              console.log(that.nowMp3Info, 'onStop')
            })
          },
          fail() {
            that.showAuditModal = true
          }
        })
      },
      // 继续录音
      resumeRecored () {
        let that = this
        that.stopNowPlayAudio()
        if (that.recorderTime == 60) {
            $Toast({
              content: '录音最长为60秒,请先发送',
            })
            return
          }
        that.recorderTimer = setInterval(() => {
          if (that.recorderTime == 60) {
            // 结束录音
            that.audioStatus = 2
            clearInterval(that.recorderTimer)
            that.pauseRecored()
            $Toast({
              content: '录音最长为60秒,请先发送',
            })
            return
          }
          that.recorderTime++
        }, 1000)
        that.audioStatus = 3
        that.recorderManager.resume()
      },
      // 暂停录音
      pauseRecored () {
        let that = this
        clearInterval(that.recorderTimer)
        that.recorderTimer = null
        that.recorderManager.pause()
        that.audioStatus = 2
      },
      // 关闭语音框
      closeAudio () {
        this.replyAudioShow = false
        this.resetAudio()
      },
      // 暂停
      stopMp3 (item, index) {
        let that = this
        that.$set(that.chatList[index], 'isPlay', false)
        that.$set(that.chatList[index], 'isStop', true) // 记录是否暂停
        that.innerAudioContext.pause()
        clearInterval(that.timer)
        // 开启定时获取列表
        if (this.circleQuery === null && !this.isHistory) {
          this.circleQuery = setInterval(() => {
            this.getMsgHistory(false)
          }, 30000);
        }
      },
      // 播放
      playMp3 (item, index) {
        if (this.audioStatus === 3) {
          $Toast({
            content: "正在录音，请结束后再播放",
            type: "warning"
          });
          return
        }
        // 停止定时获取聊天列表
        clearInterval(this.circleQuery)
        this.circleQuery = null
        this.audioPlayInfo = {
          item: item,
          index: index
        }
        // 语音已读状态刷新
        if (item.read_state === '0') {
          this.$api.updateSoundStates({message_id:item.message_id*1},{'showLoading':false}).then(res=>{
            this.$set(this.chatList[index], 'read_state', '1')
          })
        }
        let that = this
        for (let i = 0; i < that.chatList.length; i++) {
          // 只要播放音频时间不为0，且播放的音频不是本次点击的音频   清空计数器
          if (that.times && !item.isStop && !item.isPlay){
            that.times = 0
          }
          if (i == index) {
            that.$set(that.chatList[index], 'isPlay', true)
            that.$set(that.chatList[index], 'isStop', false)
          } else {
            that.$set(that.chatList[i], 'leftDin', 0)
            that.$set(that.chatList[i], 'isPlay', false)
            that.$set(that.chatList[i], 'isStop', false)
          }
        }
        clearInterval(that.timer)
        that.timer = null
        that.innerAudioContext.src = item.sound_keys.url
        that.innerAudioContext.play()
        let query = wx.createSelectorQuery();
        let divWidth
        query.select(item.className).boundingClientRect(function(rect) {
          divWidth = Math.trunc(rect.width) // 减去圆球的半径
          let pianyi = divWidth / item.sound_keys.time
          that.timer = setInterval(() => {
            if (that.times == item.sound_keys.time) {
              clearInterval(that.timer)
              that.times = 0
              that.$set(that.chatList[index], 'leftDin', 0)
              that.$set(that.chatList[index], 'isPlay', false)
              that.$set(that.chatList[index], 'isStop', false)
              return
            }
            that.times++
            that.$set(that.chatList[index], 'leftDin', item.leftDin + pianyi)
          }, 1000)
        }).exec()
      },
      // 关闭当前正在播放的录音
      stopNowPlayAudio() {
        let that = this
         // 关闭正在播放的录音
        that.innerAudioContext.pause()
        let item = that.audioPlayInfo.item,
            index = that.audioPlayInfo.index
        for (let i = 0; i < that.chatList.length; i++) {
          // 只要播放音频时间不为0，且播放的音频不是本次点击的音频   清空计数器
          if (that.times && !item.isStop && !item.isPlay){
            that.times = 0
          }
          that.$set(that.chatList[i], 'leftDin', 0)
          that.$set(that.chatList[i], 'isPlay', false)
          that.$set(that.chatList[i], 'isStop', false)
        }
        clearInterval(that.timer)
        that.timer = null
      },
      // 点击立即回复
      clickReply () {
        // this.iptValue = res
        this.uploadImg = []
        this.replyTextShow = true
        setTimeout(() => {
          // console.log('执行')
          this.scrollTop = this.scrollTop + 9999
        }, 200)
      },
      clickDoBtn (item, index) {
        let num = index + 1
        switch (num) {
          case 1:
            this.replyAudioShow = true
            break
          case 2:
            this.$router.push( "/pages/fivePage/child/usefulWord/main")
            break
          case 3:
            break
        }
      },
      // 查看图片
      lookImg (list, index) {
        this.scrollTop = this.newScrollTop
        mpvue.offAppHide()
        this.$store.commit(this.$types.PHONE_CAMERA, true)
        mpvue.previewImage({
          current: list[index], // 当前显示图片的http链接
          urls: list // 需要预览的图片http链接列表
        })
      },
      // 选择图片
      chooseImage(e) {
        if (this.upLoadLodin) {
            $Message({
              content: "上传中，请稍后再试",
              type: "warning"
            });
            return;
          }
          let i = 0; // 多图上传时使用到的index
          let that = this;
          let max = 8 - that.files.length; //最大选择数
          let upLength; //图片数组长度
          let imgFilePaths; //图片的本地临时文件路径列表
          wx.chooseImage({
            count: max || 1, //一次最多可以选择的图片张数
            sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
              let list = []
              that.havGif = false
              console.log(res.tempFilePaths, '选择成功的回调函数')
              res.tempFilePaths.forEach((ele,i)=>{
                let type = ele.substring(ele.length-3, ele.length)
                if (type == 'gif' || type == 'GIF') {
                  that.havGif = true
                } else {
                  list.push(ele)
                }
              })
              console.log(list,'上传数据')
              let len = that.files.concat(list);
              imgFilePaths = list;
              upLength = imgFilePaths.length;
              let maxLen = that.uploadImg.length * 1 + upLength * 1;
              if ( maxLen > 8) {
                wx.showModal({
                  title: "提示",
                  content: "最多只能上传8张！",
                  showCancel: false,
                  success: function (res) {
                    that.upLoadLodin = false;
                  },
                });
                return false;
              }
              if(upLength === 0) {
                if(that.havGif) {
                  $Toast({
                    content: '暂不支持gif类型的图片',
                  })
                  that.havGif = false
                }
                return
              }
              that.upLoadLodin = true;  // 上传按钮判断
              setTimeout(() => {
                that.upLoad(imgFilePaths, i, upLength); //上传操作
              }, 1000);
            },
            fail: function (res) {
              wx.hideLoading();
              that.upLoadLodin = false;
            },
            complete: function () {
              // that.upLoadLodin = false;
              // wx.showLoading({
              //   title: "上传中...",
              //   mask: true
              // });
              wx.hideLoading();
            }
          });
      },
      upLoad(imgPath, i, upLength) {
        let that = this;
        let hiseeToken = storage.getToken();
        // console.log(imgPath)
        wx.showLoading({
          title: "上传中...",
        });
        console.log('执行上传')
        //上传文件
        wx.uploadFile({
          url: api.host + "/api/chat/upload_image",
          filePath: imgPath[i],
          name: "img0",
          header: {
            "content-type": "multipart/form-data",
            "hisee-token": hiseeToken,
            Authorization: "Bearer " + hiseeToken,
          },
          success: function (res) {
            if (res.statusCode == 200) {
              // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
              that.files = that.files.concat(imgPath[i]); //合并图片显示数组
              let imgData = JSON.parse(res.data);
              that.uploadImg.push(imgData.data[0].image_key);
              i++;
              if (i == upLength) {
                wx.hideLoading();
                wx.showModal({
                  title: "成功提示",
                  content: "上传成功",
                  showCancel: false,
                  success: function (res) {
                    that.upLoadLodin = false;
                    if(that.havGif) {
                      $Toast({
                        content: '暂不支持gif类型的图片',
                      })
                      that.havGif = false
                    }
                  },
                });
              } else {
                that.upLoad(imgPath, i, upLength);
              }
              // wx.hideLoading();
              // console.log(that.files,'上传后')
              // }
            } else {
              // wx.hideLoading();
              wx.showModal({
                title: "错误提示",
                content: "上传图片失败",
                showCancel: false,
                success: function (res) {
                  that.files = [];
                  that.uploadImg = [];
                  that.upLoadLodin = false;
                },
              });
            }
          },
          fail: function (res) {
            console.log(res);
            that.upLoadLodin = false;
            wx.hideLoading();
            wx.showModal({
              title: "错误提示",
              content: "上传图片失败",
              showCancel: false,
              success: function (res) {
                // that.files = [];
                // that.uploadImg = [];
                if(that.havGif) {
                  $Toast({
                    content: '暂不支持gif类型的图片',
                  })
                  that.havGif = false
                }
              },
            });
          },
          complete: function () {},
        });
      },
      previewImage(e, index) {
        let that = this;
        wx.previewImage({
          current: that.files[index], // 当前显示图片的http链接
          urls: that.files, // 需要预览的图片http链接列表
        });
        return
        wx.showActionSheet({
          itemList: ["预览", "删除"],
          success: function (res) {
            if (res.tapIndex === 0) {
              // console.log('成功返回',res)
              //选择预览
              wx.previewImage({
                current: that.files[index], // 当前显示图片的http链接
                urls: that.files, // 需要预览的图片http链接列表
              });
            } else {
              //选择删除
              that.files.splice(index, 1); //删除本地图片地址数组中位置内容
              that.uploadImg.splice(index, 1); //删除提交给后台的图片数组中的位置内容
            }
          },
        });
      },
      deleteIndexImg (index) {
        this.uploadImg.splice(index, 1)
        this.files.splice(index, 1)
      },
      // 关闭遮罩层
      toggleLeft() {
        this.showLeft = !this.showLeft
      },
      // 处理发送时间
      filterTime (value) {
        var nowDate = (new Date).valueOf()
        var diff = nowDate - (value * 1000)  // 时间错差值

        // 相差天数
        var days = Math.floor(diff/(24*3600*1000));
        var oldDay = this.$utils.filterTime(value, 8)
        //计算出小时数
        var leave1 = diff%(24*3600*1000);    //计算天数后剩余的毫秒数
        var hours = Math.floor(leave1/(3600*1000));
        //计算相差分钟数
        var leave2 = leave1%(3600*1000);        //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2/(60*1000));
        //计算相差秒数
        var leave3 = leave2%(60*1000);      //计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3/1000);
        var str = '刚刚'
        if (days>0) {
          str = oldDay
        } else if (hours>0) {
          str = hours + '小时前'
        } else if (minutes>0) {
          str = minutes + '分钟前'
        } else {
          str = '刚刚'
        }
        return str
      },
      // 修复滚动条距离
      bindScrollTop(e) {
        if(e.mp.detail.scrollTop > 0) {
          this.newScrollTop = e.mp.detail.scrollTop
        }
      },
      // textarea 输入字数处理
      addWords () {
        this.iptValue = this.iptValue.substring(0,200)
      }
    }
  }
</script>

<style scoped lang='less'>
  .subPage {
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }
  .replyDiv {
    padding: 30rpx 33rpx;
    min-height: 670rpx;
    position: relative;
    left: 0;
    bottom: 0;
    border-top: 1rpx solid rgba(233,233,233,1);
    background: #fff;
    display: flex;
    flex-direction: column;
    .replyTop {
      textarea {
        width: 100%;
        height: 260rpx;
        overflow-y: auto;
      }
      .limit {
        text-align: right;
        color: #CCCCCC;
        font-size:28rpx;
        padding: 26rpx 0;
        border-bottom: 1rpx solid #E9E9E9;
      }
    }
    .uploadImgDiv {
      min-height: 196rpx;
      padding-top: 30rpx;
      .uploadImg {
        display: inline-block;
        position: relative;
      }
      .uploadImg:nth-child(4n) .upload {
        margin-right: 0rpx!important;
      }
      .uploadImg:nth-child(4n) .deleteImg {
        right: -16rpx!important;
      }
      .deleteImg {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        right: 16rpx;
        top: -16rpx;
      }
      .upload {
        width: 144rpx;
        height: 144rpx;
        margin-right: 33rpx;
        margin-bottom: 28rpx;
        // border: 1rpx solid red;
        border-radius:4rpx;
        box-sizing: border-box;
      }
      .addImg {
        margin-right: 0rpx!important;
      }
    }
  }
  .replyAudioDiv {
    height: 570rpx;
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
    border-top: 1rpx solid rgba(233,233,233,1);
    background: #fff;
    user-select:none;
    .closeDiv {
      text-align: right;
      height: 50rpx;
      .closeSpan {
        float:right;
        height: 100%;
        width: 45rpx;
        img {
          width: 27rpx;
          height: 27rpx;
          margin: 27rpx 31rpx 5rpx 0;
        }
      }
    }
    .timeDiv {
      height: 84rpx;
      line-height: 84rpx;
      font-size:60rpx;
      color: #000000;
      text-align: center;
      margin-bottom: 27rpx;
    }
    .clickDiv {
      text-align: center;
      height: 250rpx;
      line-height: 250rpx;
      font-size: 38rpx;
      margin-bottom: 28rpx;
      .clickAudio {
        display: inline-block;
        height: 250rpx;
        width: 250rpx;
        border-radius: 100%;
        background: #44A8FF;
        color: #fff;
        margin: 0 73rpx;
      }
      .stop {
        background: #FF5357!important;
      }
      .done {
        color: #44A8FF;
      }
    }
    .tipsDiv {
      padding-left: 37rpx;
      font-size:28rpx;
      line-height:43rpx;
      height: 43rpx;
      color: #666666;
    }
  }
  .chatTop {
    flex: 1;
    background: #F9F9F9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .timeTips {
        position: absolute;
        left: 0rpx;
        bottom: 0;
        width: 100%;
        font-size: 26rpx;
        color: #CCCCCC;
        padding-bottom: 30rpx ;
        text-align: center;
      }
    .chatList {
      padding: 30rpx 30rpx 70rpx 30rpx;
      position:relative;
      min-height: 62%;
      li {
        padding: 30rpx 30rpx 30rpx 30rpx;
        box-shadow:0px 3rpx 8rpx 0px rgba(0,0,0,0.12);
        border-radius:16rpx;
        margin-bottom: 30rpx;
        background-color: #fff;
        .headImg {
          width: 100rpx;
          height: 100rpx;
          border-radius: 100%;
          // border: 1px solid red;
        }
        .textCon {
          color: #333333;
          line-height:40rpx;
          font-size:32rpx;
          word-break: break-all;
        }
        .audioDiv {
          position: relative;
          margin: 25rpx 7rpx 0rpx 0rpx;
          padding: 0 30rpx;
          background: #7FADFD;
          height:83rpx;
          border-radius:6px;
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: #fff;
          #progress {
            flex: 1;
            display: flex;
            margin: 0 9rpx 0 24rpx;
            #progress-line{
              flex: 1;
              position: relative;
              height: 3rpx;
              background: #6ABAFF;
              .iconyuandian1 {
                width: 18rpx;
                height: 18rpx;
                background: #fff;
                border-radius: 100%;
                position: absolute;
                left: 0;
                top: -9rpx;
                // transition: left .5s ease-in 0s;
              }
            }
          }
          .palyImg {
            width: 49rpx;
            height: 49rpx;
            margin-right: 24rpx;
          }
          .time {
            margin-left: 20rpx;
          }
          .unReadPoint {
            position: absolute;
            height: 20rpx;
            width: 20rpx;
            background: linear-gradient(315deg, #ff3332 0%, #ff6f91 100%);
            top: -8rpx;
            right: -8rpx;
            border-radius: 10rpx;
          }
        }
        .imgList {
          padding-top: 30rpx;
          margin-top: 16rpx;
          border-top: 1rpx solid #D1D1D1;
          div {
            width: 135rpx;
            height: 135rpx;
            margin-right: 30rpx;
            margin-bottom: 30rpx;
            float: left;
          }
          div:nth-child(4n) {
            margin-right: 0!important;
          }
          img, span{
            display: inline-block;
            width: 100%;
            height: 100%;
          }
          .loadingSpan {
            background-color:#E7E7E7;
            position: relative;
            img {
              width: 47rpx;
              height: 39rpx;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
            }
          }
        }
        .patientDiv {
          display: flex;
          padding-bottom: 0rpx;
          img {
            margin-left: 30rpx;
          }
          .infoDiv {
            flex: 1;
            div:nth-child(1) {
              margin-top: 14rpx;
              height: 44rpx;
              line-height: 44rpx;
              span:nth-child(2) {
                font-size:34rpx;
                font-weight: bold;
              }
              .doc {
                font-size:34rpx;
                font-weight: bold;
              }
              span:nth-child(1) {
                font-size:26rpx;
                color: #999999;
              }
            }
            div:nth-child(2) {
              font-size:26rpx;
              color: #4E586E;
              text-align: right;
            }
          }
        }
        .doctorDiv {
          text-align: left;
          img {
            margin-right: 30rpx;
            margin-left: 0!important;
          }
          .sendTime {
            text-align: left!important;
          }
        }
      }
      .doctorBg {
        background:#EDF7FF!important;
      }
      .paddingBtm0 {
        padding-bottom: 0!important;
      }
    }
    .addHeight {
      min-height: 68%;
    }
    .initTop {
      font-size: 28rpx;
      color: #666666;
      line-height:43rpx;
      // margin: 30rpx 25rpx 30rpx 25rpx;
      height: 280rpx;
      background: url(https://ks3-cn-beijing.ksyun.com/wxapp/wdrm/image/patient/docBg.png) no-repeat 0 0 ;
      background-size: 100% 280rpx;
      background-color: #F9F9F9;
      color: #fff;
      .paddingBox {
        padding: 15rpx 30rpx 0 30rpx;
        height: 100%;
        box-sizing: border-box;
      }
      .topDocHeadImg {
        width: 28%;
        height: 100%;
        img {
          height: 130rpx;
          width: 130rpx;
          margin: 45rpx 0 0 37rpx;
          border-radius: 65rpx;
        }
      }
      .docDesc {
        height: 100%;
        width: 72%;
        padding-top: 45rpx;
        box-sizing: border-box;
        p {
          font-size: 26rpx;
          width: 100%;
          line-height: 40rpx;
        }
        .title {
          font-size: 40rpx;
          margin-bottom: 22rpx;
        }
      }
    }
  }
  .chatBtm {
    // border-top:1rpx solid #E9E9E9;
    height: 106rpx;
    background: #fff;
    display: flex;
    .btnFl {
      margin: 21rpx 0 0 0;
      img {
        display: block;
        width: 50rpx;
        height: 50rpx;
        margin: 0 30rpx 7rpx 14rpx;
      }
      li {
        float: left;
        font-size: 20rpx;
        color: #666666;
      }
      li:nth-child(2) {
        img {
          margin: 0 70rpx 7rpx 5rpx!important;
        }
      }
    }
    .btnFr {
      font-size:30rpx;
      margin: 21rpx 0 0 0;
      /*width: 81%;*/
      flex: 1;
      height: 90rpx;
      background: linear-gradient(90deg, #557DF5 0%, #3F4ADE 100%);
      border-radius: 4rpx;
      text-align: center;
      line-height: 90rpx;
      font-weight:400;
      font-size: 36rpx;
      color: #fff;
    }
    .fullWidth {
      width: 100%;
    }
    .sendDiv {
      width:100%;
      height:106rpx;
      background: linear-gradient(90deg, #557DF5 0%, #3F4ADE 100%);
      border-radius:4rpx;
      text-align: center;
      font-size: 36rpx;
      line-height: 106rpx;
      color: #fff;
    }
    .bandDiv {
      width:100%;
      height:106rpx;
      background: #fff;
      border-radius:4rpx;
      text-align: center;
      line-height: 106rpx;
      font-weight:400;
      color:rgba(204,204,204,1);
      font-size: 30rpx;
    }
    .redColor {
      color: #F85C5C;
    }
  }
  .isIphoneX {
    padding-bottom: 30rpx!important;
  }
.demo-container{
  width:40vh;
  height: 100vh;
  background:#fff;
  overflow-y: scroll;
  overflow-x: hidden;
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  .sure {
    z-index: 2;
    width: 650rpx;
    height: 410rpx;
    overflow: hidden;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -325rpx;
    margin-top: -205rpx;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    font-size: 34rpx;
    .top {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
    }
    .topTips {
      flex: 1;
      margin: 136rpx 100rpx 0 99rpx;
    }
    .btm {
      height: 100rpx;
      display: flex;
      div {
        flex: 1;
        line-height: 100rpx;
        text-align: center;
        background: #f7f8fa;
      }
      div:nth-child(2) {
        background: #0088ff;
        color: #fff;
      }
      .backBlue {
        background: #0088ff;
        color: #fff;
      }
    }
  }
}
.top {
    height: 80rpx;
    line-height: 80rpx;
    background: #fff;
    color: #FF9429;
    font-size: 24rpx;
    font-weight: 400;
    width: 100%;
    z-index:100;
    .topInit {
      padding: 0 38rpx;
    }
}
.goPayBox {
  height: 65rpx;
  width: 100%;
  .payBtn {
    float: right;
    margin-right: 12rpx;
    margin-top: 25rpx;
    width: 155rpx;
    height: 65rpx;
    background: #0088FF;
    border-radius: 7rpx;
    color: #fff;
    text-align: center;
    line-height: 65rpx;
  }
}
.modal {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.7);
    opacity: 1;
    z-index: 100;
    .out {
      height: 412rpx;
      border-radius: 15rpx;
      width: 650rpx;
      background: #fff;
      z-index: 999;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -206rpx;
      margin-left: -325rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .msgTop {
        flex: 1;
        padding: 77rpx 50rpx 20rpx 55rpx;
        p:nth-child(1) {
          height:50rpx;
          font-size:36rpx;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:50rpx;
          text-align: center;
          font-weight: bold;
          margin-bottom: 40rpx;
        }
        p:nth-child(2) {
          font-size:30rpx;
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:42rpx;
        }
      }
      .msgBtm {
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        font-size:34rpx;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        .sure {
          background: #0088FF;
          color: #fff;
          width: 100%;
        }
        span {
          flex: 1;
          text-align: center;
        }
        span:nth-child(1) {
          background: #f9f9f9;
        }
        span:nth-child(2) {
          background: #0088FF;
          color: #fff;
        }
      }
    }
  }
</style>
